<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二手车认证界面</title>
    <!--加载layui的css样式-->
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <!--照片栏高度-->
    <style>
        .layui-table-cell{
            height:80px;
            line-height: 80px;

        }

    </style>

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索菜单栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <!--搜索条件-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="telphone" id="telephone" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="employeeid" id="employeeid" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--搜索按钮-->
                <div class="layui-inline">
                    <button id="secondcar-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <!--查询出的信息栏-->
        <div class="layui-card-body">
            <table class="layui-hide" id="secondcar" lay-filter="secondcar-filter"></table>
            <!--前缀编号-->
            <script type="text/html" id="addList">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
            <!--layui的js包-->
            <script src="/aaa/layuiadmin/layui/layui.js"></script>
            <!--操作按键-->
            <script type="text/html" id="secondcar-bar">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="secondcar-detail">详情</a>
                <a class="layui-btn layui-btn-xs" lay-event="secondcar-cancel">取消认证</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="secondcar-del">删除</a>
            </script>
        </div>
    </div>
</div>




<!--------------------------------------弹出二手车认证详情---------------------------------------------------------------------------------------------------------------------->

<div class="x-body" style="display:none;" id="secondcar-layer">
    <!--form表单展示二手车认证的详情-->
    <form class="layui-form" id="addform" lay-filter="detailmessage">
        <div class="layui-form-item">
            <label class="layui-form-label">用户手机号：</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" id="secondcar-telephone" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电瓶车型号：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" id="secondcar-goodsname" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电瓶车出厂码：</label>
            <div class="layui-input-inline">
                <input type="text" name="carcode" id="secondcar-code" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">二手车卖价：</label>
            <div class="layui-input-inline">
                <input type="text" name="secondCarcost" id="secondcar-cost" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">二手车详细介绍：</label>
            <div class="layui-input-block">
                <textarea  class="layui-textarea" name="secondCardesc" id="secondcar-desc"></textarea>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">认证员工号：</label>
            <div class="layui-input-inline">
                <input type="text" name="employeeid" id="secondcar-employeeid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>


        <!--保存认证的信息-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="secondcar-layer">门店认证</button>
            </div>
        </div>

    </form>
</div>
<div id="" style="display: none">



    </div>
</div>
<!--自定义模板填入图片地址-->
<script type="text/html" id="showimg">
    <img src="{{ d.secondCarphotoUrl}}"/>
</script>
<!--自定义模板区分是否认证-->
<script type="text/html" id="state">
    {{#if (d.verifystate == 0) { }}
    <span style="color: red">未认证</span>
    {{# }else if(d.verifystate == 1){ }}
    <span  style="color: green">认证</span>
    {{# } }}
</script>
<script th:inline="none">
    layui.use(['table','laytpl','form'], function(){
        var table = layui.table;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var $ = layui.$;
        table.render({
            //连接搜索栏
            elem: '#secondcar',
            height: 400,
            //跳转的地址信息
            url: '/aaa/SecondCarVerifyController/GetSecondCarRelatedMessage',
            //分页功能
            page: true,
            //列表中所查询的信息
            cols: [
                [
                    {field:'add', title: '编号',align:'center',templet:'#addList',width:50},
                    {field:'school',title:'学校',align:'center',sort:true},
                    {field:'telephone',title:'用户手机号',align:'center',sort:true},
                    {field:'goodsname',title:'电车型号',align:'center',sort:true},
                    {field:'carcode',title:'出厂码',align:'center'},
                    {field:'secondCarphotoUrl',width: 150,
                        unresize: true,align:'center',title:'照片',
                        //templet:'<div><img src="{{d.secondCarphotoUrl}}"></div>'
                                    templet: '#showimg'},  //自定义显示图片方法
                    {field:'verifystate',title:'是否认证',align:'center',templet: '#state',sort:true},
                    {field:'name',title:'操作员工',align:'center',sort:true},
                    {title:'操作',toolbar:'#secondcar-bar',align:'center'},
                ]
            ],
            //显示大图-----------------------------------------------------------------------------------------------
            done:function(res,curr,count){
                hoverOpenImg();//显示大图
                $('table tr').on('click',function(){
                    $('table tr').css('background','');
                    $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }

        });

        //显示大图-----------------------------------------------------------------------------------------------
        function hoverOpenImg(){
            var img_show = null; // tips提示
            $('td img').hover(function(){
                var kd=$(this).width();
                kd1=kd*3;          //图片放大倍数
                kd2=kd*3+30;       //图片放大倍数
                var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
                img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: [kd2+'px']
                });
            },function(){
                layer.close(img_show);
            });
            $('td img').attr('style','max-width:70px;display:block!important');
        }
        //搜索框点击事件-----------------------------------------------------------------------------------------------
        $('#secondcar-searchbtn').click(function () {
            table.reload('secondcar', {
                url: '/aaa/SecondCarVerifyController/GetSecondCarRelatedMessage',
                where: {
                    telephone:$("#telephone").val(),
                    employeeid:$("#employeeid").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        })
        //所有按钮点击事件-----------------------------------------------------------------------------------------------
        //监控数据表格
        table.on('tool(secondcar-filter)', function(obj){
            var data = obj.data;
            //详情按钮触发的事件----------------------------------------
            //查询对应的二手车认证信息表单内容----------------------------------------------
            if(obj.event === 'secondcar-detail'){
                //查询对应的二手车认证信息表单内容
                $.post({
                    //后台地址
                    url:'/aaa/SecondCarVerifyController/GetSecondCarDetailMessage',
                    //传入后台的内容
                    data:{
                        carcode:data.carcode,
                        telephone:data.telephone
                    },
                    //成功返回的参数
                },function (data) {
                    //alert(data[0].telephone);
                    $("#secondcar-telephone").val(data[0].telephone);
                    $("#secondcar-goodsname").val(data[0].goodsname);
                    $("#secondcar-desc").val(data[0].secondCardesc);
                    $("#secondcar-code").val(data[0].carcode);
                    $("#secondcar-cost").val(data[0].secondCarcost);
                    $("#secondcar-employeeid").val(data[0].employeeid);
                });
                //加载数据完毕后打开表单
                secondcarlayer = layer.open({
                    type: 1,
                    title:'二手车认证详情',
                    shade : [ 0.3, '#393D49' ],
                    maxmin : false,
                    shadeClose : false,
                    area : [ '893px', '550px' ],
                    //打开的弹出层
                    content: $('#secondcar-layer')
                });



                //取消门店二手车认证
            } else if(obj.event === 'secondcar-cancel'){

                layer.confirm('确定取消电话号码为'+data.telephone+'的认证信息吗？', function(index) {
                    $.post("/aaa/SecondCarVerifyController/CancelVerification", {
                        "carcode":data.carcode,
                        "telephone":data.telephone
                    }, function(res) {
                        layer.msg('取消成功',{icon:1,time:1000});
                        location.reload();
                    });

                });

            } else if(obj.event === 'secondcar-del'){
                layer.confirm('确认要删除电话为'+data.telephone+'的用户发的二手车信息吗？', function(index) {
                    $.post("/aaa/SecondCarVerifyController/DeleteSecondCarMessage", {
                        "carcode":data.carcode,
                        "telephone":data.telephone
                    }, function(res) {
                        if (res.code==100){
                            layer.closeAll();
                            layer.msg('删除成功',{icon:1,time:3000});
                            location.reload();
                        }
                        else{
                            layer.msg('删除失败',{icon:1,time:3000});
                        }

                    });



                });
            }
        });






        //二手车认证按钮
        //form表单监控，监控提交按钮
        form.on('submit(secondcar-layer)', function(data) {
            var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
            console.log(param);

            $.ajax({
                url: "/aaa/SecondCarVerifyController/VerifySecondCar",
                method: 'post',//method请求方式，get或者post
                dataType: 'json',//预期服务器返回的数据类型
                data: param,//表格数据序列化
                success: function (res) {//res为相应体,function为回数
                        if (res.code==100) {
                            layer.closeAll();
                            layer.msg('认证成功',{icon:1,time:1000});
                            location.reload();
                        }else{
                            layer.msg('认证失败',{icon:1,time:1000});
                        }

                 }

            });
        });
    });
</script>
</body>
</html>